import React, { useState, useEffect } from 'react';
import { Menu } from 'antd';
import { DesktopOutlined } from '@ant-design/icons';
import { useHistory } from 'react-router-dom';
import routes from '../../../../router/routes';

const Sider = () => {
    const history = useHistory();
    // 变量
    const [appChildren, setAppChildren] = useState<any>([]);
    // 生命周期
    useEffect(() => {
        init();
    }, []);
    // 方法
    // 初始化
    const init = () => {
        // 找到app路由
        let app: any = routes.find((item) => item.path === '/app');
        // 赋值app路由下的子路由
        setAppChildren([...app.children])
    };
    // 点击菜单的每一项
    const handleClick = (e: any) => {
        // 跳转对应的路由
        history.push(appChildren[e.key].path)
    };
    return (
        <Menu
            onClick={handleClick}
            style={{ width: 256,height:688 }}
            defaultSelectedKeys={['1']}
            mode="inline"
            theme="dark"
        >
            {appChildren[0] && appChildren.map((item: any, index: number) => {
                return item.name && <Menu.Item key={index} icon={<DesktopOutlined />}>
                    {item.name}
                </Menu.Item>
            })}
        </Menu>
    )
};

export default Sider
